<template>
    <div>
<sou></sou>
<!-- <van-swipe :autoplay="3000" lazy-render>
  <van-swipe-item v-for="image in images" :key="image">
    <img :src="image" style="width: 380px;height: 200px;"/>
  </van-swipe-item>
</van-swipe> -->
<lbt></lbt>
<van-grid>
  <van-grid-item :icon="item.image_src" :text="item.name" v-for="item in catitemsApiData"/>
  <van-grid-item :icon="item.image_src" :text="item.name" v-for="item in catitemsApiData"/>
</van-grid>
<p v-show="pp">京东秒杀{{ time+'秒' }}</p>
<div class="box">
    <div v-for="item in mm">
        <img :src="item.aa" alt="" style="width: 180px;height: 180px;">
        <p>{{ item.bb }}</p>
    </div>
</div>
<div class="box">
    <div style="height: 90px;width: 180px;">
        <p>发现好货</p>
        <p>品质新生活</p>
    </div>
    <div v-for="item in mm">
        <img :src="item.aa" alt="" style="width: 180px;height: 180px;">
        <p>{{ item.bb }}</p>
    </div>
</div>
    </div>
</template>

<script setup>
import sou from '@/components/sou.vue';
import lbt from '@/components/lbt.vue';
import router from '@/router';
import { ref } from 'vue';
// const images = [
//       'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
//       'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
//       'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
//       'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
//     ];
import { catitemsApi } from '@/api/api';
let catitemsApiData=ref([])
catitemsApi().then(res=>{
    catitemsApiData.value=res.data.message
    console.log(res);
    
})
let time=ref(30)
let timer
let pp=ref(true)
timer=setInterval(()=>{
    time.value--
    if(time.value==0){
        // clearInterval(timer)
        pp.value=false
    }
},1000)
let mm=ref([
    {aa:'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',bb:'$99999'},
    {aa:'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',bb:'$99999'},
    {aa:'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',bb:'$99999'},
    {aa:'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',bb:'$99999'},
    {aa:'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',bb:'$99999'},
    {aa:'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',bb:'$99999'},
    {aa:'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',bb:'$99999'},
])
</script>

<style scoped>
.box{
    width: 180px;
    float: left;
}
</style>